<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8" />
<head>
    <title>Home</title>
    <script th:src="@{js/sockjs.min.js}"></script>
    <script th:src="@{js/stomp.min.js}"></script>
    <script th:src="@{js/jquery.js}"></script>
</head>
<body>
<p>
    聊天室
</p>

<form id="wiselyForm">
    <textarea rows="4" cols="60" name="text"></textarea>
    <input type="submit"/>
</form>

<script th:inline="javascript">
    $('#wiselyForm').submit(function(e){
        e.preventDefault();
        var text = $('#wiselyForm').find('textarea[name="text"]').val();
        sendSpittle(text);
    });

    var sock = new SockJS("/endpointChat"); //1连接endpoint名称为“/endpointChat”的endpoint
    var stomp = Stomp.over(sock);//使用STOMP子协议的WebSocket客户端
    stomp.connect('guest', 'guest', function(frame) {//连接WebSocket客户端
        /** 订阅/user/queue/notifications发送的消息，这里与控制器的messagingTemplate.convertAndSendUser中定义的地址保持一致。
        * 这里多了一个/user,并且这个/user是必须的，使用了/user才会发闪送消息到指定的用户
        */
        stomp.subscribe("/user/queue/notifications", handleNotification);
    });

    //处理从服务器返回来的信息
    function handleNotification(message) {
        $('#output').append("<b>Received: " + message.body + "</b><br/>")
    }
    //发送消息
    function sendSpittle(text) {
        stomp.send("/chat", {}, text);//3
    }
    //关闭
    $('#stop').click(function() {sock.close()});
</script>

<div id="output"></div>
</body>
</html>